<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 上方搜索栏 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索</legend>
            <div class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 100px">用户名称</label>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="inputUserName" autocomplete="off" class="layui-input" placeholder="输入名称"/>
                        </div>
                        <label class="layui-form-label" style="width: 100px">电话/邮箱</label>
                        <div class="layui-input-inline" style="width: 200px">
                            <input type="text" id="inputUserAccount" autocomplete="off" class="layui-input" placeholder="输入电话/邮箱"/>
                        </div>
                    </div>
                    <!-- 搜索、清除按钮 -->
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary layui-border-green btn-user-action" data-type="search">
                            <i class="layui-icon layui-icon-search"></i> 搜 索
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary btn-user-action" data-type="refresh">
                            <i class="layui-icon layui-icon-refresh"></i> 清 除
                        </button>
                    </div>
                </div>
            </div>
        </fieldset>
        <!-- 表格 -->
        <table class="layui-hide" id="table-system-user" lay-filter="table-system-user"></table>
    </div>
</div>
<!--表格头部工具类（左上）-->
<script type="text/html" id="toolbar-table-user">
    <div class="layui-btn-container">
        <!-- 【刷新】-->
        <button class="layui-btn layui-btn-sm layuimini-btn-primary" lay-event="btn-user-reload"><i class="fa fa-refresh"></i></button>
        <!-- 【添加】-->
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="btn-user-add"><i class="fa fa-plus"></i> 添加</button>
        <!-- 【修改状态】下拉菜单：禁用与否 -->
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="btn-user-changeStatus">修改状态 <i class="fa fa-caret-down"></i></button>
        </div>
        <!-- 【删除】 -->
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="btn-user-delete"><i class="fa fa-trash-o"></i> 删除</button>
        </div>
    </div>
</script>
<!--表格每行末尾的操作按钮-->
<script type="text/html" id="tool-table-user">
    <a class="layui-btn layui-btn-xs" lay-event="user-edit">更新</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="user-more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<!--引入JS文件-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/jsencrypt/jsencrypt.min.js" charset="utf-8"></script>
<script src="/lib/jsencrypt/rsa.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'dropdown'], function () {
        let $ = layui.jquery,
            form = layui.form,
            dropdown = layui.dropdown,
            table = layui.table;

        let currPage = 1                    // 定义全局变量：记录当前页码
        // 表格
        let table_user = table.render({
            elem: '#table-system-user',     // 绑定的表格ID
            url: '/system/user/list',       // 表格数据请求URL
            response: {statusCode: 200},    // 请求成功的返回码
            height: 'full-158',             // 表格高度：高度最大化减去差值
            toolbar: '#toolbar-table-user', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports'],  // 工具栏
            title: '系统用户数据表',           // 表名，导出数据的时候有用
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'id', title: 'ID', width: 80, align: 'center', sort: true},
                    {field: 'username', title: '用户名称', width: 150, align: 'center'},
                    {field: 'email', title: '邮箱', width: 200, align: 'center'},
                    {field: 'phone', title: '手机', width: 200, align: 'center'},
                    {
                        field: 'status', title: '状态', align: 'center', width: 95, templet: function (d) {
                            let checkStr = "";
                            if (d.status === 1) {
                                checkStr += " checked "
                            } else if (d.status === 2) {
                                checkStr += " checked disabled "
                            }
                            return '<input type="checkbox" lay-filter="check-user-status" value="' + d.id + '" lay-skin="switch" lay-text="正常|禁用" ' + checkStr + '/>'
                        }
                    },
                    {field: 'remark', title: '备注', align: 'center'},
                    {field: 'updateTime', title: '更新时间', align: 'center'},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#tool-table-user', width: 150}
                ]
            ],
            page: true,
            done: function (res, curr, count) {
                // 此处修复bug：删除最后一页数据后，跳转至上一页
                if (res.data.length === 0 && curr > 1) {
                    table_user.reload({page: {curr: curr - 1}})
                }
                currPage = curr
            }
        });

        // 表格的搜索加载与刷新，几个参数的定义，详见如下注释！
        let active = {
            // 重载：刷新本页数据，检索等数据不变 （直接使用表格的table_user.reload() 即可）
            // reload: function () {
            //     //执行重载
            //     table.reload('table-system-user', {
            //         page: {curr: currPage},     // 页码
            //         where: {                    // 检索数据
            //             username: $('#inputUserName').val(),
            //             account: $('#inputUserAccount').val()
            //         }
            //     });
            // },
            // 搜索：从第一页开始，检索数据不变
            search: function () {
                //执行重载
                table.reload('table-system-user', {
                    page: {curr: 1},            // 页码
                    where: {                    // 检索数据
                        username: $('#inputUserName').val(),
                        account: $('#inputUserAccount').val()
                    }
                });
            },
            // 刷新：从第一页开始，检索数据清空
            refresh: function () {
                //执行刷新
                table.reload('table-system-user', {
                    page: {curr: 1},                    // 页码
                    where: {username: "", account: ""}  // 检索数据清空
                });
                $('#inputUserName').val('')             // 检索栏输入的数据清空
                $('#inputUserAccount').val('')
            }
        };
        // 【搜索】【清除】按钮的响应事件
        $('.btn-user-action').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 【左上】操作按钮
        table.on('toolbar(table-system-user)', function (obj) {
            let that = this;
            switch (obj.event) {
                // 【刷新】按钮
                case "btn-user-reload":
                    table_user.reload()
                    break;
                // 【添加】按钮
                case "btn-user-add":
                    layer.open({
                        title: '添加新用户',             // 添加用户 窗口的标题
                        type: 2,                        // 窗口类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        shade: 0.2,                     // 遮罩透明度
                        maxmin: true,                   // 是否允许最大最小化
                        shadeClose: false,              // 是否点击遮罩关闭
                        area: ['600px', '500px'],       // 弹窗大小
                        content: '/system/user/goAdd',  // 窗口显示的内容
                        end: function () {
                            table_user.reload();        // 添加结束后，窗口关闭，刷新表格
                        }
                    });
                    break;
                // 【修改状态】按钮（批量修改状态）
                case "btn-user-changeStatus":
                    // 下拉菜单
                    dropdown.render({
                        elem: that,
                        show: true,         // 外部事件触发即显示
                        data: [
                            {title: '开启', id: 1, templet: '开启 <i class="fa fa-check"> </i>'},
                            {title: '禁用', id: 0, templet: '禁用 <i class="fa fa-close"> </i>'}
                        ],
                        click: function (obj) {
                            let newStatus = obj.id;     // 选中菜单的ID即为新的status
                            let userIds = "";           // 读取所有选中的按钮
                            let checkUserList = table.checkStatus('table-system-user').data
                            for (let i = 0; i < checkUserList.length; i++)
                                userIds += (checkUserList[i].id + ",")
                            // 去掉末尾的逗号
                            userIds = userIds.substring(0, userIds.lastIndexOf(','));
                            // 选中才响应
                            if (userIds.length > 0) {
                                let actionText = newStatus === 1 ? "启用" : "禁用"
                                // 确认对话框
                                layer.confirm('确认要<b> ' + actionText + ' </b>选中的用户吗', {
                                    icon: 3, title: '修改用户状态提示'
                                }, function (index) {
                                    // 执行修改状态操作
                                    $.post("/system/user/changeStatus/" + newStatus, {userIds: userIds}, function (d) {
                                        if (d.code === 200) {       // 状态码 200 表示成功，其他表示失败
                                            layer.msg(d.msg, {time: 3000, icon: 1});
                                            table_user.reload()
                                        } else {
                                            layer.msg(d.msg, {time: 3000, icon: 2});
                                        }
                                    });
                                });
                            } else {
                                layer.msg('请勾选需要修改状态的用户！', {time: 2000, icon: 7});
                            }
                        }
                    });
                    break;
                // 【删除】按钮（批量删除）
                case "btn-user-delete":
                    // 获取选中的数据（以下的操作，逻辑基本同 修改状态 部分）
                    let checkUserList = table.checkStatus('table-system-user').data
                    let userIds = "";
                    for (let i = 0; i < checkUserList.length; i++) {
                        userIds += (checkUserList[i].id + ",")
                    }
                    userIds = userIds.substring(0, userIds.lastIndexOf(','));
                    if (userIds.length > 0) {
                        // 删除用户 - 第 1 次确认
                        layer.confirm("<a style='color: red'>确认要 删除 选中的用户吗？</a>", {
                            icon: 3, title: '删除用户确认【1/2】'
                        }, function (index) {
                            layer.close(index);
                            // 删除用户 - 第 2 次确认
                            layer.confirm("<a style='color: red'>真的要 删除 选中的用户吗？删除后不可恢复，请三思而后行！</a>", {
                                icon: 3, title: '删除用户确认【2/2】'
                            }, function (index) {
                                // 发起 删除用户 请求
                                $.post("/system/user/delete", {userIds: userIds}, function (d) {
                                    // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                                    if (d.code === 200) {
                                        layer.msg(d.msg, {time: 3000, icon: 1});
                                        table_user.reload()
                                    } else {
                                        layer.msg(d.msg, {time: 3000, icon: 2});
                                    }
                                });
                            });
                        });
                    } else {
                        layer.msg('请勾选需要删除的用户！', {time: 2000, icon: 7});
                    }
                    break;
            }
        });

        // 【行操作】监听表格行末按钮
        table.on('tool(table-system-user)', function (obj) {
            let that = this;
            let data = obj.data;
            let layEvent = obj.event;
            switch (layEvent) {
                // 【编辑】按钮
                case "user-edit":
                    layer.open({
                        title: '更新用户信息',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: false,
                        area: ['600px', '400px'],
                        content: '/system/user/goEdit/' + data.id,
                        end: function () {
                            table_user.reload()
                        }
                    });
                    break;
                // 【更多】按钮
                case "user-more":
                    dropdown.render({       // 下拉菜单
                        elem: that,
                        show: true,
                        data: [
                            {title: '分配角色', id: 'set-role'},
                            {title: '重置密码', id: 'reset-password'},
                            {title: '<a style="color: red">删除</a>', id: 'delete'}],
                        click: function (d, othis) {
                            // 【分配角色】
                            if (d.id === 'set-role') {
                                layer.open({
                                    title: '更新用户角色',
                                    type: 2,
                                    shade: 0.2,
                                    maxmin: true,
                                    shadeClose: false,
                                    area: ['600px', '500px'],
                                    content: '/system/user/goAuthRole/' + data.id
                                });
                            }
                            // 【重置密码】
                            else if (d.id === 'reset-password') {
                                let layer_resetPassword = layer.open({
                                    type: 1,
                                    btn: ["确定", "取消"],
                                    title: '重置用户【' + obj.data.username + '】的密码',
                                    skin: 'layui-layer-prompt',
                                    content: "<div><form>" +
                                        "<input id='newPassword1' type='password' class='layui-layer-input' value='' placeholder='请输入新密码' autocomplete='off'>" +
                                        "<input id='newPassword2' type='password' class='layui-layer-input' value='' placeholder='请再次输入新密码' style='margin-top:10px;' autocomplete='off'>" +
                                        "</form></div>",
                                    yes: function (index, l) {
                                        let newPassword1 = $(l).find("#newPassword1").val()
                                        let newPassword2 = $(l).find("#newPassword2").val()
                                        if (newPassword1 !== '' && newPassword2 !== '') {
                                            if (newPassword1 === newPassword2) {
                                                // 密码加密
                                                let encrypt = new JSEncrypt()
                                                encrypt.setPublicKey(PUBLIC_KEY)
                                                newPassword1 = encrypt.encrypt(newPassword1)
                                                newPassword2 = encrypt.encrypt(newPassword2)
                                                // 发起 重置密码 请求
                                                // 加载层
                                                let index_loading = layer.load(1, {
                                                    shade: [0.2, '#fff'] //0.1透明度的白色背景
                                                });
                                                $.post("/system/user/resetPassword", {
                                                    userId: obj.data.id,
                                                    newPassword: newPassword1,
                                                    newPassword2: newPassword2
                                                }, function (d) {
                                                    // 关闭加载层
                                                    layer.close(index_loading)
                                                    if (d.code === 200) {
                                                        layer.close(layer_resetPassword)
                                                        layer.msg(d.msg, {time: 3000, icon: 1});
                                                    } else {
                                                        layer.msg(d.msg, {time: 3000, icon: 2});
                                                    }
                                                });
                                            } else {
                                                layer.msg('输入的新密码不一致，请重新输入！', {icon: 2});
                                            }
                                        } else {
                                            layer.msg('新密码不能为空，请输入！', {icon: 2});
                                        }
                                    }
                                });
                            }
                            // 【删除用户】
                            else if (d.id === 'delete') {
                                // 删除用户 - 第 1 次确认
                                layer.confirm("<a style='color: red'>确认要删除用户 " + data.username + "(" + data.id + ") 吗？</a>", {
                                    icon: 3, title: '删除用户确认【1/2】'
                                }, function (index) {
                                    layer.close(index);
                                    // 删除用户 - 第 2 次确认
                                    layer.confirm("<a style='color: red'>真的要删除用户 " + data.username + "(" + data.id + ") 吗？删除后不可恢复，请三思而后行！</a>", {
                                        icon: 3, title: '删除用户确认【2/2】'
                                    }, function (index) {
                                        // 加载层
                                        let index_loading = layer.load(1, {
                                            shade: [0.2, '#fff'] //0.1透明度的白色背景
                                        });
                                        // 发起 删除用户 请求
                                        $.post("/system/user/delete", {userIds: data.id}, function (d) {
                                            // 关闭加载层
                                            layer.close(index_loading)
                                            // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                                            if (d.code === 200) {
                                                layer.msg(d.msg, {time: 3000, icon: 1});
                                                table_user.reload()
                                            } else {
                                                layer.msg(d.msg, {time: 3000, icon: 2});
                                            }
                                        });
                                    });
                                });
                            }
                        },
                    });
                    break;
            }
        });

        // 【行操作】修改用户状态（用户行的switch开关切换事件）
        form.on('switch(check-user-status)', function (data) {
            // 注意：isChecked是操作之后的值
            let isChecked = data.elem.checked;
            let actionText = isChecked ? "开启" : "禁用"
            let newStatus = isChecked ? "1" : "0"
            let userId = data.value;
            layer.confirm('确认要 ' + actionText + ' ID为 ' + data.value + ' 的用户吗？', {
                title: false,
                btn: ['确定', '取消'],
                closeBtn: 0,        // 不显示右上角的关闭（X）按钮
                // 按钮【确定】的回调
                btn1: function (index) {
                    $.post("/system/user/changeStatus/" + newStatus, {userIds: userId}, function (d) {
                        if (d.code === 200) {
                            layer.msg(d.msg, {time: 3000, icon: 1});
                            data.elem.checked = isChecked;
                            form.render();
                        } else {
                            layer.msg(d.msg, {time: 3000, icon: 2});
                            data.elem.checked = !isChecked;
                            form.render();
                        }
                    });
                },
                // 按钮【取消】的回调
                btn2: function (index) {
                    data.elem.checked = !isChecked;
                    form.render();
                    layer.close(index);
                }
            });
        });

    });
</script>
</body>
</html>